import { Button, Container, createStyles, Grid, Theme, Typography } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
import CloudDownloadIcon from "@material-ui/icons/CloudDownload"
import * as React from "react"
import HeroTiles from "./hero-tiles"

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    background: `linear-gradient(to right bottom,#f7f5fb 50%,#fff 50%)`,
    [theme.breakpoints.up("sm")]: {
      padding: `200px 0`,
    },
  },
  button: {
    marginTop: "2rem",
    padding: ".8rem 2rem",
  },
}))

export default function Hero() {
  const classes = useStyles()
  return (
    <div className={classes.root}>
      <Container>
        <Grid container spacing={10}>
          <Grid item lg={6}>
            <Typography variant="h3" gutterBottom>开源电商系统</Typography>
            <Typography variant="h5" gutterBottom>
              快速开发和部署电商系统
            </Typography>
            <Typography variant="h6" gutterBottom>
              Mall 是一个用 Java 开发的电商系统，提供了一组紧凑和高效的开源电商业务组件。
              并为开发人员、系统管理员、业务用户提供了后台管理平台，使其能够便捷操作。
            </Typography>
            <Typography variant="h6" gutterBottom>
              所有的业务组件都可以嵌入到 Java 程序中，或者作为服务器、集群、云中的服务运行。
              它们可以作为独立的服务运行，也可以集成在一起为电商业务提供丰富的套件。
              它们与 Spring 完美地结合在一起。通过使用丰富的 Java 和 REST API，它们是开发电商业务的理想基础。
              它们支持微服务编排或将微服务本身编写成软件。
            </Typography>
            <Grid container>
              <Grid item sm={6}>
                <Button variant="contained" size="large" color="primary" className={classes.button}>立即开始</Button>
              </Grid>
              <Grid item>
                <Button variant="outlined" size="large" color="primary" className={classes.button}
                        startIcon={<CloudDownloadIcon/>}>立即下载</Button>
              </Grid>
            </Grid>
          </Grid>
          <Grid item sm={12} lg={6}>
            <HeroTiles/>
          </Grid>
        </Grid>
      </Container>
    </div>
  )
}
